import React, { useEffect, useState } from 'react'
import "./Fast.css"
import { FsatAPI } from "@/request/api"
import { styled } from '@mui/material/styles';
import Button, { ButtonProps } from '@mui/material/Button';
const ColorButton = styled(Button)<ButtonProps>(({ theme }) => ({
  color: '#fff',
  backgroundColor: '#2E57FF',
  '&:hover': {
    backgroundColor: '#2E57FF',
  },
}));
export default function Fast() {
  // 
  let [records, setRecords] = useState<Ire[]>([])

  const Fast = async () => {
    let res = await FsatAPI()
    if (res.errCode === 0) {
      setRecords(res.data.records)
    }
    // console.log(res);

  }

  useEffect(() => {
    Fast()
  }, [])
  return (
    <div className='fast'>
      {
        records.map((item, index) => {
          return (
            <div className='box' key={index}>
              <div className='left'>
                <img src={require("../../assets/images/home/subject.png")} alt="" />
                <div className='zi'>{item.title}</div>
              </div>
              <div className='btn'><ColorButton variant='contained'>刷题</ColorButton></div>
            </div>

          )
        })
      }

    </div>
  )
}
